import React, {useEffect, useState} from 'react';
import {Editor, ShortcutKey} from 'amis-editor';
import {inject, observer} from 'mobx-react';
import {RouteComponentProps} from 'react-router-dom';
import {toast, Select} from 'amis';
import {Icon} from '../icons/index';
import '../editor/DisabledEditorPlugin'; // 用于隐藏一些不需要的Editor预置组件
import '../renderer/MyRenderer';
import '../editor/MyRenderer';
import axios from 'axios';
import {log} from 'console';

let currentIndex = -1;

let host = `${window.location.protocol}//${window.location.host}`;

// 如果在 gh-pages 里面
if (/^\/amis-editor-demo/.test(window.location.pathname)) {
  host += '/amis-editor';
}

const schemaUrl = `${host}/schema.json`;

// const editorLanguages = [
//   {
//     label: '简体中文',
//     value: 'zh-CN'
//   },
//   {
//     label: 'English',
//     value: 'en-US'
//   }
// ];

export default inject()(
  observer(function ({match}: {} & RouteComponentProps<{id: string}>) {
    let defaultSchema: any = {
      // type: 'page',
      // title: 'Hello world',
      // body: '初始页面'
    };
    const [isMobile, setIsMobile] = useState(false);
    const [preview, setPreview] = useState(false);
    const [schema, setSchema] = useState(defaultSchema);
    // const [menuId, setMenuId] = useState<number | null>(null);

    // 请求JSON
    const onMenuItem = async (id: any) => {
      if (!id) return;
      axios
        .get(`/apiTest/v2/api/sys/oauth/newconf/customMenus/${id}`)
        .then(res => {
          if (res.status === 200) {
            console.log(res.data.data.menuConfig);

            if (res.data.data.menuConfig) {
              setSchema(JSON.parse(res.data.data.menuConfig));
              // setSchema(res.data.data.menuConfig);
            }
          }
        });
    };

    useEffect(() => {
      const urlParams = new URLSearchParams(window.location.search);
      const id = urlParams.get('id');
      console.log(id);

      if (id) {
        onMenuItem(id);
      }
    }, []);
    // const id = match.params.id;
    function save() {
      window.parent.postMessage({type: 'action', message: schema}, '*');
      toast.success('保存成功');

      // axios
      //   .put(`/apiTest/v2/api/sys/oauth/newconf/customMenus/${id}`, {
      //     menuConfig: schema
      //   })
      //   .then(res => {
      //     if (res.status === 200) {
      //       toast.success('保存成功');
      //     }
      //   });
    }

    function onChange(value: any) {
      setSchema(value);
      //updateSchema(value)
    }

    // function changeLocale(value: string) {
    //   localStorage.setItem('suda-i18n-locale', value);
    //   window.location.reload();
    // }

    function exit() {
      // if (navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('Chrome') != -1) {
      //   window.location.href = 'about:blank'
      //   window.close()
      // } else {
      //   window.opener = null
      //   window.open('', '_self')
      //   window.close()
      // }
      //history.push(`/${store.pages[index].path}`);
      window.close();
    }

    return (
      <div className="Editor-Demo">
        <div className="Editor-header">
          <div className="Editor-title">可视化编辑器</div>
          <div className="Editor-view-mode-group-container">
            <div className="Editor-view-mode-group">
              <div
                className={`Editor-view-mode-btn editor-header-icon ${
                  !isMobile ? 'is-active' : ''
                }`}
                onClick={() => {
                  setIsMobile(false);
                }}
              >
                <Icon icon="pc-preview" title="PC模式" />
              </div>
              <div
                className={`Editor-view-mode-btn editor-header-icon ${
                  isMobile ? 'is-active' : ''
                }`}
                onClick={() => {
                  setIsMobile(true);
                }}
              >
                <Icon icon="h5-preview" title="移动模式" />
              </div>
            </div>
          </div>

          <div className="Editor-header-actions">
            <ShortcutKey />
            {/*<Select*/}
            {/*  className="margin-left-space"*/}
            {/*  options={editorLanguages}*/}
            {/*  value={curLanguage}*/}
            {/*  clearable={false}*/}
            {/*  onChange={(e: any) => changeLocale(e.value)}*/}
            {/*/>*/}
            <div
              className={`header-action-btn m-1 ${preview ? 'primary' : ''}`}
              onClick={() => {
                setPreview(!preview);
              }}
            >
              {preview ? '编辑' : '预览'}
            </div>
            {!preview && (
              <div className={`header-action-btn`} onClick={save}>
                保存
              </div>
            )}

            {!preview && (
              <div className={`header-action-btn exit-btn`} onClick={exit}>
                退出
              </div>
            )}
          </div>
        </div>
        <div className="Editor-inner">
          <Editor
            theme={'cxd'}
            preview={preview}
            isMobile={isMobile}
            value={schema}
            onChange={onChange}
            onPreview={() => {
              setPreview(true);
            }}
            onSave={save}
            className="is-fixed"
            $schemaUrl={schemaUrl}
            showCustomRenderersPanel={true}
          />
        </div>
      </div>
    );
  })
);
